<template>
  <div>
    <div class="show">
      <div style="margin: 20px 0"></div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div>
            <el-button
              class="bbb"
              type="info"
              icon="el-icon-back"
              circle
              @click="back"
            ></el-button>
            <el-button
              style="float: right"
              type="warning"
              icon="el-icon-edit"
              circle
              @click="editor"
            ></el-button>
            <el-button
              style="float: right"
              type="danger"
              icon="el-icon-delete"
              circle
              @click="deleteBlog"
            ></el-button>
          </div>
          <h1 align="center">{{ blog.title }}</h1>
          <div style="margin: 10px 0">
            <a class="time">{{ blog.time }}</a>
          </div>
        </div>

        <div
          :toolbarsBackground="'#f9f9f9'"
          class="markdown-body"
          v-html="blog.content"
        ></div>
      </el-card>
    </div>
  </div>
</template>

<script>
import "github-markdown-css/github-markdown.css";
export default {
  name: "ShowBlog",
  data() {
    return {
      blog: {
        id: "",
        title: "",
        time: "",
        content: "",
      },
    };
  },

  methods: {
    //自定义函数
    oneNew() {
      var start = location.href.lastIndexOf("=");
      var id = location.href.substring(start + 1);
      sessionStorage.setItem("id", id);
      this.$axios
        .get("http://120.77.71.211:9011/api/showBlog?id=" + id)
        .then((resp) => {
          const _this = this;
          const blog = resp.data;
          _this.blog.title = blog.title;
          _this.blog.time = blog.time;

          var MardownIt = require("markdown-it");
          var md = new MardownIt();
          var result = md.render(blog.content);
          _this.blog.content = result;
        });
    },
    back() {
      this.$router.push("/");
    },
    editor() {
      this.$router.push("/editorBlog");
    },
    deleteBlog() {
      this.blog.id = sessionStorage.getItem("id");
      this.$axios.post("http://120.77.71.211:9011/api/deleteBlog", this.blog).then((resp) => {
        this.$router.replace("/");
      });
    },
  },

  created() {
    //生命周期函数

    this.oneNew();
  },
};
</script>

<style scoped>
.markdown-body {
  font-size: 15px;
}
.show {
  width: 1050px;
  margin: 0 auto;
}
h1 {
  font-size: 30px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 1050px;

  background: rgba(195, 235, 241, 0.4);
}

.a {
  float: right;
  width: 95%;
}
</style>